<!-- 项目管理 新增/修改 -->
<template>
  <div>
    <el-dialog :title="roleData.title" :visible.sync="roleData.showModal" width="650px" top="5vh">
      <el-form label-width="90px" :model="data" ref="update" :rules="rules" v-loading="showLoading" element-loading-text="数据加载中">
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="项目名称" prop="name">
              <el-input size="medium" placeholder="请输入项目名称" v-model="data.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="总金额" prop="totalAmt">
              <el-input type="number" size="medium" placeholder="请输入总金额" v-model="data.totalAmt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="起投金额" prop="minAmt">
              <el-input type="number" size="medium" placeholder="请输入起投金额" v-model="data.minAmt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="10">
            <el-form-item label="投资期限" prop="term">
              <el-input type="number" size="medium" placeholder="请输入投资期限" v-model="data.term"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位" prop="termUnit">
              <el-select v-model="data.termUnit" size="medium" placeholder="请选择">
                <el-option v-for="item in termList" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="截至时间" prop="dueTime">
              <el-date-picker v-model="data.dueTime" value-format="yyyy-MM-dd" type="date" size="medium" :clearable="false" :editable="false" placeholder="选择截止日期" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="预计收益" prop="expectIncomeAmt">
              <el-input type="number" size="medium" placeholder="请输入预计收益" v-model="data.expectIncomeAmt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="状态" prop="status">
              <el-select v-model="data.status" size="medium" placeholder="请选择">
                <el-option
                  v-for="item in statusList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>-->
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="项目介绍" prop="content">
              <el-input type="textarea" rows="3" size="medium" placeholder="请输入项目介绍" v-model="data.content"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 底部按钮开始 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="add">提交</el-button>
        <el-button size="medium" @click="roleData.showModal = false">取消</el-button>
      </span>
      <!-- 底部按钮结束 -->
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["roleData"],
  data () {
    let validtotalAmt = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("总金额不能为空"));
      } else if (value <= 0) {
        callback(new Error("总金额不能小于0"));
      } else {
        callback();
      }
    };
    let validminAmt = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("起投金额不能为空"));
      } else if (value <= 0) {
        callback(new Error("起投金额不能小于0"));
      } else {
        callback();
      }
    };
    let validterm = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("投资期限不能为空"));
      } else if (value <= 0) {
        callback(new Error("投资期限不能小于0"));
      } else {
        callback();
      }
    };
    let validexpect = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("预计收益不能为空"));
      } else if (value <= 0) {
        callback(new Error("预计收益不能小于0"));
      } else {
        callback();
      }
    };
    return {
      termList: [],
      // statusList: [], // 状态列表
      showLoading: false, //是否显示loading
      title: "", //标题
      // 提交的数据
      data: {
        id: "", // 索引Id
        name: "", // 项目名称
        totalAmt: "", // 总金额
        minAmt: "", // 起投金额
        term: "", // 投资期限
        termUnit: "", // 投资单位
        expectIncomeAmt: "", // 预计收益
        content: "", // 项目介绍
        dueTime: "", // 截至时间
      },
      //表单校验
      rules: {
        name: [{ required: true, message: "项目名称不能为空", trigger: "blur" }],
        totalAmt: [{ required: true, validator: validtotalAmt, trigger: "blur" }],
        minAmt: [{ required: true, validator: validminAmt, trigger: "blur" }],
        term: [{ required: true, validator: validterm, trigger: "blur" }],
        expectIncomeAmt: [{ required: true, validator: validexpect, trigger: "blur" }],
        termUnit: [{ required: true, message: "请选择期限单位", trigger: "blur" }],
        content: [{ required: true, message: "项目介绍不能为空", trigger: "blur" }],
        dueTime: [{ required: true, message: "请选择截至时间", trigger: "blur" }]
      }
    };
  },
  methods: {
    //新增、修改角色
    add () {
      this.$refs["update"].validate(async valid => {
        if (valid) {
          this.showLoading = true;
          let url =
            this.roleData.type == "create"
              ? "/project/save"
              : "/project/update";
          let httpMethod = this.roleData.type == "create" ? "POST" : "PUT";
          let result = await this.request.httpRequest(
            httpMethod,
            url,
            this.data
          );
          if (result.code == 200) {
            this.roleData.showModal = false;
            this.$message({ type: "success", message: result.msg });
            this.$emit("close");
          } else {
            this.$message({ type: "error", message: result.msg });
          }
          this.showLoading = false;
        }
      });
    },
    //获取详情
    async getDetail () {
      if (this.roleData.roleId) {
        let url = `/project/get/${this.roleData.roleId}`;
        let result = await this.request.httpRequest("GET", url);
        if (result.code == 200) {
          this.data.id = result.data.id;
          this.data.name = result.data.name;
          this.data.totalAmt = result.data.totalAmt;
          this.data.minAmt = result.data.minAmt;
          this.data.term = result.data.term;
          this.data.termUnit = result.data.termUnit;
          this.data.expectIncomeAmt = result.data.expectIncomeAmt;
          this.data.content = result.data.content;
          this.data.dueTime = this.common.formatD(result.data.dueTime);
        } else {
          this.$message({ type: "error", message: result.msg });
        }
      }
    },
    // 获取单位列表
    async getterm () {
      this.termList = await this.common.enumsList("TERM_UNIT"); // 获取单位
      // this.statusList = await this.common.enumsList("PROJECT_STATUS"); //获取状态
    }
  },
  mounted () {
    this.getterm();
    this.getDetail();
  }
};
</script>
